<template>
    <el-aside class="full-percent">
        <el-scrollbar class="scroll forbid-select full-percent">
            <el-menu class="p-menu" ref="menu" unique-opened :default-active="active" mode="vertical">
                <template v-for="item in adminRouter">
                    <template v-if="check_menu(item)">
                        <!--父目录正常并且下面存在正常的子目录-->
                        <el-sub-menu :index="item.url || item.name" v-show="showMenu(item)"
                            class="font-auto-resize cursor-pointer">
                            <template #title class="font-auto-resize">
                                <el-icon>
                                    <component :is="getIcon(item.icon)" />
                                </el-icon>
                                <span class="font-auto-resize">{{ item.name }}</span>
                            </template>
                            <template v-for="c_item in item.children">
                                <el-menu-item :index="c_item.url || c_item.name" @click="go(c_item.url)"
                                    class="font-auto-resize" v-show="c_item.status === 1">
                                    <el-icon>
                                        <component :is="getIcon(c_item.icon)" />
                                    </el-icon>
                                    <span>{{ c_item.name }}</span>
                                </el-menu-item>
                            </template>
                        </el-sub-menu>
                    </template>
                    <template v-else>
                        <el-menu-item :index="item.url || item.name" @click="go(item.url)"
                            class="font-auto-resize cursor-pointer" v-show="item.status === 1">
                            <el-icon>
                                <component :is="getIcon(item.icon)" />
                            </el-icon>
                            <span>{{ item.name }}</span>
                        </el-menu-item>
                    </template>
                </template>
            </el-menu>
        </el-scrollbar>
    </el-aside>
</template>

<script setup>
import router from '@/router'
import { getIcon } from "@/utils/tools"
import { useRipple } from "@usehook"
import storeInstance from "@/pinia"

const adminRouter = $computed(() => {
    return storeInstance.userStore.getRouteInfo.menu
})

const showMenu = (item) => {
    return item.status === 1 && item.children && item.children.length && item.children.filter(c => c.status === 1).length
}

const emits = defineEmits(["click"])

let active = $ref(router.currentRoute.value.path)

const go = (path) => {
    router.push(path)
    emits("click")
}

const check_menu = (item) => {
    return item.children && item.children.length
}

useRipple(".p-menu .el-sub-menu__title")
</script>

<style scoped>
:deep(.el-menu) {
    height: 100%;
    border: 0
}

:deep(.el-menu-item),
:deep(.el-sub-menu__title) {
    height: calc(var(--font-size) * 2 + 10px) !important;
}
</style>

<style>
/*隐藏菜单横向滚动条*/
.scroll.el-scrollbar .el-scrollbar__bar.is-vertical {
    width: 0 !important;
}
</style>